<template>
  <div style="position: relative;width:90%;">
    <el-row>
      <el-col :span="10">
        <div>
          <h2>合同及时回款率</h2>
          <h4>各业务类型合同及时回款率</h4>
        </div>
        <el-form :model="bar" size="mini" @submit.native.prevent >
         <el-form-item label="年份选择" style="display:inline-block;margin-right:20px;">
            <el-select v-model="barYear" placeholder="全部" clearable @change="barChange">
              <el-option v-for="i in yOption" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" style="display:inline-block;">
            <el-cascader
              v-model="barType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="barChange">
            </el-cascader>
          </el-form-item>
          <div id="bar" :style="{width: '300px', height: '400px'}"></div>
        </el-form>
      </el-col>
       <el-col :span="14" >
        <div>
        <h2>各业务类型合同额占比</h2>
        <h4>各业务类型合同金额及占比</h4>
        </div>
        <el-form :model="pie2" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:block;float:left;margin-right:20px;">
            <el-select v-model="pieYear" placeholder="全部" clearable @change="pieChange"><!--仍为静态-->
              <el-option v-for="i in yOption" :key="i.value" :label="i.label" :value="i.value" >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型" style="display:inline-block;">
            <el-cascader
              v-model="pieType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="pieChange">
            </el-cascader>
          </el-form-item>
          <div style="width:85%;">
            <div id="pie" :style="{width: '400px', height: '400px'}"></div>
          </div>
        </el-form>
      </el-col>
      <el-col :span="20">
        <span style="width:100%;display:inline-block">
        <div style="float:left">
          <h2>合同起止进度表</h2>
          <h4>未结款合同起止日期</h4>
        </div>
        <div style="float:right;">
        <el-form :model="pie2" size="mini" @submit.native.prevent >
          <el-form-item label="年份选择" style="display:block;float:left;margin-top:26px;margin-right:20px;">
            <el-date-picker
              v-model="flowYear"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="flowChange">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="业务类型" style="display:block;margin-top:26px;float:left;">
            <el-cascader
              v-model="flowType"
              placeholder="全部"
              ref="ref_business"
              :options="businesstypeTree"
              :props="typeProps"
              :show-all-levels="false"
              clearable
              @change="flowChange">
            </el-cascader>
          </el-form-item>
        </el-form>
        </div>
        </span>
        <div id="highcharts-more"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts';
import { Businesstype } from '@/api/business.js';
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
HighchartsMore(Highcharts)
export default {
  data () {
    return {
      pie1: {
        businessType: null
      },
      yOption: [],
      barYear: null,
      barType: [],
      barTitle: null,
      barData1: null,
      barData2: null,
      pieYear: null,
      pieType: [],
      pieData: [],
      flowYear: null,
      flowType: [],
      chartTitie: [],
      chartData: [],
      businesstypeTree: [],
      typeProps: {
        value: 'id',
        label: 'businessName',
        checkStrictly: true /*  multiple: true, */,
        children: 'children'
      }
    };
  },
  mounted () {
    this.loadbusinesstypeTree();
    this.loadYearRange();
    this.barChange();
    this.pieChange();
    this.flowChange();
  },
  methods: {
    initBar () {
      let getBar = echarts.init(document.getElementById('bar'));
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {type: 'line'},
          formatter: function (params) {
            var htmlStr = '';
            htmlStr += '<div><span>' + params[0].name + '</span><br/> ';
            for (var i = 0; i < params.length; i++) {
              htmlStr += '<span style="width: 10px;height: 10px;display:inline-block;margin-right:5px;border-radius: 50%;background-color:' + params[i].color + '"></span><span>' + params[i].seriesName + '：</span>' + '<span>' + params[i].value[2] + '</span><br/>';
            }
            htmlStr += '</div>';
            return htmlStr
          }
        },
        legend: {
          left: 10,
          top: 12
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '5%',
          top: '16%',
          containLabel: true
        },
        barWidth: '60%',
        xAxis: {
          type: 'value',
          axisLine: {show: false},
          axisTick: {show: false}
        },
        yAxis: {
          type: 'category',
          data: this.barTitle,
          axisLine: {show: false},
          axisTick: {show: false}
        },
        series: [{
          type: 'bar',
          color: '#409EFF',
          name: '及时完成数',
          stack: 'percent',
          data: this.barData1,
          label: {
            show: true,
            left: 'center',
            formatter: function (params) {
              if (params.value[0] !== 0) return params.value[0] + '%';
              return ''
            }
          }
        },
        {
          type: 'bar',
          color: '#4FFFA7',
          name: '超时完成数',
          stack: 'percent',
          data: this.barData2,
          label: {
            show: true,
            left: 'center',
            formatter: function (params) {
              if (params.value[0] !== 0) return params.value[0] + '%';
              return ''
            }
          }
        }]
      };
      getBar.setOption(option)
    },
    barChange () {
      let params = {
        year: this.barYear ? this.barYear : null,
        businessType: this.barType[this.barType.length - 1]
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.contractFinishRate(this, params).then(res => {
          this.barTitle = [];
          this.barData1 = [];
          this.barData2 = [];
          for (let i = 0; i < res.data.length; i++) {
            this.barTitle.push(res.data[i].name);
            this.barData1.push([Math.round(res.data[i].value1 * 100 / (res.data[i].value1 + res.data[i].value2)), i, res.data[i].value1]);
            this.barData2.push([Math.round(res.data[i].value2 * 100 / (res.data[i].value1 + res.data[i].value2)), i, res.data[i].value2]);
          }
          this.initBar();
        }).catch(e => {
          reject(e);
        });
      });
    },
    initPie () {
      let getPie = echarts.init(document.getElementById('pie'));
      var option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: '合同金额',
            type: 'pie',
            radius: '50%',
            data: this.pieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      getPie.setOption(option)
    },
    pieChange () {
      let params = {
        year: this.pieYear ? this.pieYear : null,
        businessType: this.pieType[this.pieType.length - 1]
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.contractClassify(this, params).then(res => {
          this.pieData = res.data;
          this.initPie();
        }).catch(e => {
          reject(e);
        })
      })
    },
    moreChart () {
      var options = this.getMoreOptions(this.type);
      if (this.chart) {
        this.chart.destroy();
      };
      this.chart = new Highcharts.Chart('highcharts-more', options);
    },
    getMoreOptions (type) {
      return {
        chart: {
          type: 'columnrange',
          inverted: true
        },
        title: {
          text: ' '
        },
        xAxis: {
          categories: this.chartTitie,
          min: 0,
          max: 5,
          scrollbar: {
            enabled: true
          }
        },
        yAxis: {
          title: '',
          opposite: true,
          type: 'datetime',
          // tickInterval:  60 * 24 * 3600 * 1000,
          dateTimeLabelFormats: {
            day: '%m月%d日',
            week: '%Y-%m-%d',
            month: '%Y年%m月'
          }
        },
        tooltip: {
          formatter: function () {
            let str = '起止日期： ';
            let l = new Date(this.point.low);
            let h = new Date(this.point.high);
            str += l.getFullYear() + '-' + (l.getMonth() + 1) + '-' + l.getDate() + '至' + h.getFullYear() + '-' + (h.getMonth() + 1) + '-' + h.getDate();
            return str
          }
        },
        plotOptions: {
          columnrange: {
            dataLabels: {
              enabled: true,
              formatter: function () {
                return this.value;
              }
            }
          }
        },
        legend: {
          enabled: false
        },
        series: [{
          data: this.chartData,
          minPointLength: 3
        }]
      }
    },
    flowChange () {
      let params = {yearStart: 0, yearEnd: 0, businessType: this.flowType[this.flowType.length - 1]};
      if (this.flowYear) {
        var year = new Date(this.flowYear[1]);
        year.setMonth(year.getMonth() + 1);
        params.yearStart = (new Date(this.flowYear[0])).getTime() / 1000;
        params.yearEnd = year.getTime() / 1000
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.contractCurrent(this, params).then(res => {
          this.chartTitie = [];
          this.chartData = [];
          for (let i = 0; i < res.data.length; i++) {
            this.chartTitie.push(res.data[i].name);
            this.chartData.push([res.data[i].value1 * 1000, res.data[i].value2 * 1000])
          }
          this.moreChart();
        }).catch(e => {
          reject(e);
        })
      })
    },
    // 级联下拉列表数据获取
    loadbusinesstypeTree () {
      return new Promise((resolve, reject) => {
        Businesstype.tree(this)
          .then((res) => {
            this.businesstypeTree = res.data;
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    // 年份列表数据获取
    loadYearRange () {
      let params = {year: 3};
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.anaYearRange(this, params).then(res => {
          let thisYear = new Date().getFullYear();
          for (let i = res.data - 2; i <= thisYear; i++) {
            this.yOption.push({value: i, label: i});
          }
        }).catch(e => {
          reject(e)
        })
      })
    }
  }
};
</script>
